<template>
    <li>
    <span>
      {{model.title}}
         <el-button size="mini"  icon="el-icon-document-add" circle  @click="showAddChildJobs"></el-button>
        <el-button size="mini" icon="el-icon-delete" circle @click="delJobs(model)"></el-button>

    </span>
        <ul v-if="hasChild">
            <job-box v-for="(item,index) in model.children" v-bind:model="item" v-bind:key="index"></job-box>
        </ul>


        <el-dialog title="添加" width="60%" :visible.sync="dialogVisible">
            <el-row>
                <el-col :span="12">
                    <el-input v-model="subJob.title" size="small" placeholder="活动名称"></el-input>
                </el-col>
                <el-col :span="5">
                    <el-button size="mini" @click="addChildJobs">添加</el-button>
                </el-col>
            </el-row>

        </el-dialog>

    </li>
</template>

<script>
    import {mapActions, mapState} from 'vuex'

    export default {
        name: "JobBox",
        props: ['model'],
        data() {
            return {
                open: true,
                subJob: {title: "", content: "",},
                dialogVisible: false,
            }
        },
        methods: {
            ...mapActions([
                'delJobs',
                'createJob'
            ]),
            showAddChildJobs() {
                this.dialogVisible = true;
            },
            addChildJobs() {
                this.createJob({title: this.subJob.title, content: this.subJob.content, parentJobId: this.model.id})
                this.dialogVisible = false;
                this.subJob = {title: "", content: ""}
            },

        },
        computed: {
            hasChild() {

                return this.model.children && this.model.children.length
            }
        },
    }
</script>

<style scoped>

</style>